<template>

  <div class="personalCenter">
    <el-container>
      <!--<el-header>个人中心</el-header>-->
      <el-container>

        <el-aside width="500px">

          <el-col :span="12">
            <div class="sub-title"></div>
            <!--用户头像-->
            <div class="demo-image">

              <div class="block" v-for="fit in fits" :key="fit">

                <el-upload
                  class="avatar-uploader"
                  action="/api/upload/uploadImg"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="url" :src="user.image" class="avatar">
                  <!--//v-if 表示如果为空就不展示 如果有东西就展示-->
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

              </div>




            </div>
            <!--<el-upload-->
              <!--class="avatar-uploader"-->
              <!--action="/api/upload/uploadImg"-->
              <!--:show-file-list="false"-->
              <!--:on-success="handleAvatarSuccess"-->
              <!--:before-upload="beforeAvatarUpload">-->
              <!--<img v-if="user.image" :src="user.image" class="avatar">-->
              <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
            <!--</el-upload>-->


          </el-col>

         <!-- <el-upload
            class="avatar-uploader"
            action="/api/upload/uploadImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="user.image" :src="user.image" class="avatar">
            &lt;!&ndash;//v-if 表示如果为空就不展示 如果有东西就展示&ndash;&gt;
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>-->

          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="用户名">{{user.userName}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{user.sex}}</el-descriptions-item>
            <el-descriptions-item label="生日" :span="2">{{user.birthday}}</el-descriptions-item>
            <el-descriptions-item label="职业" :span="2">{{user.job}}</el-descriptions-item>
            <el-descriptions-item label="手机号" :span="2">{{user.phone}}</el-descriptions-item>
            <el-descriptions-item label="邮箱" :span="2">{{user.email}}</el-descriptions-item>


          </el-descriptions>
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item label="夸夸你自己" :span="2">{{user.introduction}}</el-descriptions-item>
          </el-descriptions>

          <el-button type="text" size="small" @click="updateUser()">编辑个人信息</el-button>

          <el-empty description="下厨房"></el-empty>


        </el-aside>
            <!--模态窗口-->
        <!--修改个人信息-->


        <!--日历-->
        <el-container>

          <el-calendar v-model="value">
          </el-calendar>

        </el-container>

      </el-container>
    </el-container>
  </div>

</template>
<script>
    import jwtDecode from 'jwt-decode'
    export default {
      name: "Users",
      data() {
        return {

          decode:{
            user:{}
          },
          user:{},

          fits: ['fill'],
          url: '',
          sizeList: ['large'],
          tableData: [
            {
              date: '2016-05-03',
              name1: 'Wechat',
              name2: 'Github',
            },
          ],
          value: new Date(),
          url:''

        }
      },
      methods: {
        selectUser: function () {
          var token = window.localStorage.getItem("userS");

          alert(token)

          const decode = jwtDecode(token);

          this.user=JSON.parse(decode.user);
         // console.log(this.user.id)
          alert(this.user.id)

          this.$axios.get("/user/selectOne?id=" +this.user.id).then(res => {
            this.user = res.data;
            this.url = res.data.image;
          })
        },
        // updateUser: function(){
        //
        // },
        //成功后的图片回调方法
        handleAvatarSuccess(res, file) {
          this.user.image = URL.createObjectURL(file.raw);
          this.user.image = res.data;
        },
        //上传前的方法
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },


        handleEdit(index, row) {
          console.log(index, row)
        },
        handleDelete(index, row) {
          console.log(index, row)
        },


      },
      mounted() {
        this.selectUser();
      }
    }


</script>

<style scoped>
.el-header {
  line-height: 60px;
  text-align: center;
  background-color: #b3c0d1;
}
.el-aside {
  line-height: 44px;
  text-align: center;
  background-color: #d3dce6;
}
.el-main {
  line-height: 36px;
  text-align: center;
  background-color: #e9eef3;
}

.demo-basic--circle {
  align: 'center';
  margin-top: 30px;
  margin-left: 150px;
}
.block {
  margin-left: 25px;
  font-weight: bold;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1368px;
  border-radius: 30px;
}
/*用胡头像上传用到的样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
